<template>
  <div>
    <div class="photos" v-if="isphotos">
      <div class="photos-title">
        <span class="photitle-text">剧照</span>
        <span @click="isShwobox=true" v-if="" class="photitle-all">全部({{ movedetail.photos.length }})<van-icon name="arrow" /></span>
      </div>
      <div class="photos-list">
        <ul class="picullist">
          <li v-for="(item,index) in movedetail.photos" :key="index" @click="showPic(index)">
            <div class="photos-item">
                <img v-lazy="item" alt="">
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="photos" v-else>
      <div class="photos-title">
        <span class="photitle-text">剧照</span>
      </div>
      <div class="photos-list">
        <div class="nojuzhao">暂无电影剧照</div>
      </div>
    </div>

    <div class="hidden-box" v-if="isShwobox">
      <div class="navbar">
        <van-icon class="navcross" name="arrow-left" @click="isShwobox=false" />
        <span class="nav-title">剧照({{ movedetail.photos.length }})</span>
      </div>
      <ul class="hiddenul">
        <li v-for="(item,index) in movedetail.photos" :key="index">
          <div @click="showPic(index)">
              <img v-lazy="item" alt="">
          </div>
        </li>
      </ul>
    </div>

    <div class="hidden-pic" v-if="isShowpic">
      <van-icon name="cross" @click="isShowpic=false" />
      <van-swipe @change="onChange" :initial-swipe="curindex">
        <van-swipe-item v-for="(item,index) in movedetail.photos" :key="index">
          <img v-lazy="item" alt="">
        </van-swipe-item>
        <template #indicator>
          <div class="custom-indicator">{{ current + 1 }}/{{ movedetail.photos.length }}</div>
        </template>
      </van-swipe>
    </div>

  </div>
</template>

<script>
export default {
  name: 'Photos',
  props: ['movedetail'],
  data() {
    return {
      isShwobox: false,
      isShowpic: false,
      // 控制轮播图数字显示的索引
      current: 0,
      // 点击哪个就显示那个轮播图索引
      curindex: 0,
      // 是否有剧照
      isphotos: true,
    }
  },
  methods: {
    onChange(index) {
      this.current = index
    },
    showPic(index) {
      this.curindex = index
      this.current = index
      this.isShowpic = true
    }
  },
  created() {
    // 判断是否有剧照照片
    if (this.movedetail.photos === undefined) {
      this.isphotos = false
    } else {
      this.isphotos = true
    }
  }
}
</script>

<style scoped>
.photos-list::-webkit-scrollbar {
  display: none;
}
.picullist::-webkit-scrollbar {
  display: none;

}
.photos {
  margin-top: .10rem;
  background-color: #fff;
  box-sizing: border-box;
}
.photos-title {
  height: .62rem;
  width: 100%;
  padding: .15rem;
  box-sizing: border-box;
}
.photitle-text {
  font-size: .16rem;
  text-align: left;
  color: #191a1b;
}
.photitle-all {
  font-size: 13px;
  color: #797d82;
  float: right;
  position: relative;
}
.photos-title span {
  display: inline-block;
  height: .225rem;
  line-height: .22rem;
}
.photitle-all .van-icon {
  font-size: .13rem;
  top: 50%;
  transform: translateY(-65%);
}
.picullist {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  height: 1.15rem;
  margin: 0;
  padding-left: .15rem;
  box-sizing: border-box;
}
.picullist li {
  min-width: 1.50rem;
  margin-right: .10rem;
  width: 1.50rem;
  height: 1.00rem;
}
.photos-item {
  width: 1.50rem;
  height: 1.00rem;
  position: relative;
  overflow: hidden;
}
.photos-item img {
  width: 100%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}






.hidden-box {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  overflow-y: hidden;
  background-color: #fff;
  z-index: 99;
  overflow: hidden;
}
.hidden-box::-webkit-scrollbar {
  display: none;
}
.hiddenul{
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.hiddenul li {
  width: 33%;
  height: calc(33.33333vw - 1px);
}
.hiddenul li div {
  width: calc(33.33333vw - 1px);
  height: calc(33.33333vw - 1px);
}
.hiddenul img {
  width: 100%;
  height: 100%;
}
.navbar {
  position: relative;
  width: 100%;
  background-color: #fff;
  border-bottom: 1px solid #ededed;
  height: .45rem;
  line-height: .45rem;
}
.navcross {
  position: absolute;
  padding-left: .2rem;
  margin-top: .13rem;
  color: #ff5f16;
  font-size: .2rem;
}
.nav-title {
  display: block;
  font-size: .18rem;
  text-align: center;
}






.hidden-pic {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: #000000;
  z-index: 999;
}
.van-swipe {
  overflow: hidden;
  height: 100%;
  box-sizing: border-box;
}
.van-swipe-item {
  position: relative;
}
.van-swipe-item img {
  width: 100%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: block;
}
.custom-indicator {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: .16rem;
  color: #fff;
  font-size: .18rem;
  font-weight: normal;
}
.hidden-pic .van-icon {
  position: absolute;
  top: .15rem;
  left: .20rem;
  color: #fff;
  font-size: .20rem;
  z-index: 99;
}





.nojuzhao {
  width: 100%;
  height: 50px;
  text-align: center;
  color: #bdc0c5;
}
</style>